html, body {
	height: 100%;
	/*background-color: #f3f3f3;*/
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#404040));
}

.background-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*background: url('/assets/img/wallpaper1.jpg') no-repeat;*/
	background-size: cover;
	opacity: 0;
	transition: opacity 1000ms;
}

.main-outer {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	.main-inner {
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 2px 1px rgba(0, 0, 0, .1);
		background-color: rgba(0, 0, 0, .4);
		color: #eee;
		h1 {
			text-align: center;
			font-weight: normal;
		}
		p {
			text-align: center;
		}
		.subjects {
			flex: 1;
			display: flex;
			flex-direction: row;
			> div {
				flex: 1;
				text-align: center;
				span {
					cursor: pointer;
				}
			}
			.icon-left > a:hover span:before,
			.icon-center > a:hover span:before,
			.icon-right > a:hover span:before {
				color: #FFCC33;
			}
			.icon-left {
				text-align: right;
			}
			.icon-right {
				text-align: left;
			}
		}
	}
}

